{% extends '::base.html.twig' %}
{% block javascript %}
	{{ parent() }}
	<script type="text/javascript">

	function removeFavoriteFromTable(id) {

		var table = document.getElementById("favoritesTable");
	
		for(var i = 0; i < table.rows.length; i++) {
		
			var row = table.rows[i];
			var hid = row.cells[0].childNodes[1];
		
			if(hid.value == id) {
				table.deleteRow(i);
				break;	
			}
		}
	}

	function removeFromFavorites(id) {
		
		var request;
		if (window.XMLHttpRequest) { 
			// code for IE7+, Firefox, Chrome, Opera, Safari
  			request = new XMLHttpRequest();
		} else {
  			// code for IE6, IE5
  			request = new ActiveXObject("Microsoft.XMLHTTP");
  		}
	
		request.onreadystatechange=function(){
 	
 			if (request.readyState==4 && request.status==200){
   					
   				if(request.responseText == "success") {
   					
   					//remove the show from the list (avoid 'postback')
   					removeFavoriteFromTable(id);
   					
   					//clear message if previous action resulted in error
   					hideMessage();
   					
   				} else {
   				
   					showMessage("There was a problem removing the show from your favorites");
   				}
 			}
		}
		
		var path = "{{ path('_favorites_remove', {'format':'raw', 'id':''}) }}";
	
		//hack to append the actual id to route
		path += "/" + id;
	
		request.open("GET", path, true);
		request.send(null);
		
	}
	
	function showMessage(message) {
	
		var msg = document.getElementById("message");
		msg.innerHTML = message;
		msg.style.display = "block";
	}
	
	function hideMessage() {
		
		var msg = document.getElementById("message");
		msg.style.display = "none";
	}

	</script>

{% endblock %}

{% block body %}
	{{ parent() }}
		<div style="width: auto; margin: auto; text-align: left;">
			<h1>My Favorite Shows</h1>
			<p id="message" style="color: red; display: none;" />
			<table id="favoritesTable">
				{% for show in series %}
					<tr>
						<td>
							<input type="hidden" value="{{ show.id }}" />
						</td>
						<td style="padding-right: 10px;">
							<img height="20" width="20" onClick="removeFromFavorites({{ show.id }});" src="{{ asset('bundles/showstop/img/favorite_remove.png') }}" alt="Remove From Favorites" title="Remove From Favorites" />
						</td>
						<td>
							<a href="{{ path('_seriespage', { "id": show.id }) }}">{{ show.name }}</a>
						</td>
					</tr>
				{% endfor %}
			</table>
		</div>
 {% endblock %}